<template>
  <div>
    <el-submenu v-if="hasChildren" :index="item.menuId.toString()">
      <template slot="title">{{ item.menuName }}</template>
      <menu-item
        v-for="child in item.sysMenuVO"
        :key="child.menuId"
        :item="child"
      ></menu-item>
    </el-submenu>
    <el-menu-item v-else :index="item.menuId.toString()">{{
      item.menuName
    }}</el-menu-item>
  </div>
</template>

<script>
export default {
  name: "menu-item", // 对于递归组件需要添加名称
  props: ["item"],
  computed: {
    hasChildren() {
      return this.item.sysMenuVO && this.item.sysMenuVO.length;
    },
  },
};
</script>